<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="160px"
        label-suffix="："
        v-if="form"
      >
        <div class="header-block">
          <div style="display: flex; align-items: center; margin-bottom: 20px">
            <image-preview
              v-if="fieldConfig.avatar"
              :src="form.avatar"
              :width="100"
              :height="100"
            />
            <b style="font-size: 24px; margin-left: 24px">
              {{ `${$t("name")}：${form.employeeName}` }}
            </b>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.sex">
              <el-form-item :label="$t('gender')" label-width="60px">
                <dict-tag :options="dict.type.leave_sex" :value="form.sex" />
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="fieldConfig.sex">
              <el-form-item :label="$t('mobile_number')">
                {{ form.phone }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="fieldConfig.emailCompany">
              <el-form-item :label="$t('company_email')" label-width="90px">
                {{ form.emailCompany }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-tabs v-model="detailTab" @tab-click="handleTabClick">
          <el-tab-pane :label="$t('information')" name="1">
            <el-card class="box-card" style="margin-bottom: 20px">
              <div slot="header" class="clearfix">
                <span>{{ $t("personal_information") }}</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="8" v-if="fieldConfig.employeeName">
                  <el-form-item :label="$t('name')">
                    {{ form.employeeName }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.employeeCode">
                  <el-form-item :label="$t('employee_code')">
                    {{ form.employeeCode }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.chineseName">
                  <el-form-item :label="$t('chinese_name')">
                    {{ form.chineseName }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.englishName">
                  <el-form-item :label="$t('english_name')">
                    {{ form.englishName }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.middleName">
              <el-form-item :label="$t('middle_name')" prop="middleName">
                {{ form.middleName }}
              </el-form-item>
            </el-col>
                <el-col :span="8" v-if="fieldConfig.phone">
                  <el-form-item :label="$t('mobile_number')">
                    {{ form.phone }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.phoneHome">
                  <el-form-item :label="$t('residential_phone_number')">
                    {{ form.phoneHome }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.phoneOffice">
                  <el-form-item :label="$t('office_phone_number')">
                    {{ form.phoneOffice }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.email">
                  <el-form-item :label="$t('personal_email')">
                    {{ form.email }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.emailCompany">
                  <el-form-item :label="$t('company_email')">
                    {{ form.emailCompany }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.birthday">
                  <el-form-item :label="$t('date_of_birth')">
                    {{ form.birthday }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.maritalStatus">
                  <el-form-item :label="$t('marital_status')">
                    {{ dict.label.leave_marital_status[form.maritalStatus] }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.cardNo">
                  <el-form-item :label="$t('identity_card_number')">
                    {{ form.cardNo }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.issuingCountry">
                  <el-form-item :label="$t('identity_card_issuance_country')">
                    {{ form.issuingCountry }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.otherDocumentTypes">
                  <el-form-item :label="$t('other_identity_document_type')">
                    {{ form.otherDocumentTypes }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.otherDocumentNo">
                  <el-form-item :label="$t('other_identity_document_numbers')">
                    {{ form.otherDocumentNo }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.passportNumber">
                  <el-form-item :label="$t('passport_number')">
                    {{ form.passportNumber }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.passportCountry">
                  <el-form-item :label="$t('issuing_country')">
                    {{ form.passportCountry }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.passportExpirationDate">
                  <el-form-item :label="$t('passport_expiration_date')">
                    {{ form.passportExpirationDate }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.birthPlace">
                  <el-form-item :label="$t('place_of_birth')">
                    {{ form.birthPlace }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.nationality">
                  <el-form-item :label="$t('nationality')">
                    {{ form.nationality }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.domicile">
                  <el-form-item :label="$t('hukou')">
                    {{ form.domicile }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.relationship">
                  <el-form-item :label="$t('cpc_ccyl')">
                    {{ form.relationship }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.socialSecurityNo">
                  <el-form-item :label="$t('social_insurance_userid')">
                    {{ form.socialSecurityNo }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.providentFundNo">
                  <el-form-item :label="$t('housing_provident_fund_userid')">
                    {{ form.providentFundNo }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.addressResidential">
                  <el-form-item :label="$t('residential_address')">
                    {{ form.addressResidential }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.addressCorrespondence">
                  <el-form-item :label="$t('mailing_address')">
                    {{ form.addressCorrespondence }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item :label="$t('remarks')">
                    {{ form.remark }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card" style="margin-bottom: 20px">
              <div slot="header" class="clearfix">
                <span>{{ $t("emergency_contact_perosns") }}</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="8" v-if="fieldConfig.emergencyContactName">
                  <el-form-item :label="$t('name')">
                    {{ form.emergencyContactName }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.emergencyContactRelation">
                  <el-form-item :label="$t('relationship')">
                    {{ form.emergencyContactRelation }}
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="fieldConfig.emergencyContactPhone">
                  <el-form-item :label="$t('contact_phone_number')">
                    {{ form.emergencyContactPhone }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-card class="box-card" style="margin-bottom: 20px">
              <div slot="header" class="clearfix">
                <span>{{ $t("experience") }}</span>
              </div>

              <el-table :data="form.experienceDTOList" ref="experienceInfo" border :max-height="tableHeight">
                <el-table-column
                  :label="$t('type')"
                  align="center"
                  prop="type"
                  width="150"
                  v-if="fieldConfig.type"
                >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.experience_type"
                      :value="scope.row.type"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('start_date')"
                  prop="startTime"
                  align="center"
                  width="150"
                  v-if="fieldConfig.startTime"
                />
                <el-table-column
                  :label="$t('ending_date')"
                  align="center"
                  prop="endTime"
                  width="150"
                  v-if="fieldConfig.endTime"
                />
                <el-table-column
                  :label="$t('content')"
                  prop="content"
                  align="center"
                  v-if="fieldConfig.content"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="$t('remarks')"
                  prop="remark"
                  align="center"
                  v-if="fieldConfig.type"
                  :show-overflow-tooltip="true"
                />
              </el-table>
            </el-card>

            <el-card class="box-card" style="margin-bottom: 20px">
              <div slot="header" class="clearfix">
                <span>{{ $t("bank_information") }}</span>
              </div>

              <el-table :data="form.bankDTOList" ref="experienceInfo" border>
                <el-table-column
                  :label="$t('bank_account_number')"
                  align="center"
                  prop="bankAccount"
                  v-if="fieldConfig.bankAccount"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="$t('bank_account_holder')"
                  align="center"
                  prop="accountHolder"
                  v-if="fieldConfig.accountHolder"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="$t('bank_code')"
                  align="center"
                  prop="bankCode"
                  v-if="fieldConfig.bankCode"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="$t('branch_code')"
                  align="center"
                  prop="branchCode"
                  v-if="fieldConfig.branchCode"
                  :show-overflow-tooltip="true"
                />
                <el-table-column
                  :label="$t('bank_name_of_opening_account')"
                  align="center"
                  prop="openingBank"
                  v-if="fieldConfig.openingBank"
                  :show-overflow-tooltip="true"
                />

                <el-table-column
                  :label="$t('permission_of_default_bank_account')"
                  align="center"
                  prop="defaultAccount"
                  v-if="fieldConfig.defaultAccount"
                >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.yes_or_no"
                      :value="scope.row.defaultAccount"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('remarks')"
                  align="center"
                  prop="remark"
                  :show-overflow-tooltip="true"
                />
              </el-table>
            </el-card>
            <el-card class="box-card" style="margin-bottom: 20px">
              <div slot="header" class="clearfix">
                <span>{{ $t("employment_information") }}</span>
              </div>
              <el-table :data="form.employmentDTOList" ref="experienceInfo" border>
                <el-table-column
                  :label="$t('employing_company')"
                  prop="employerName"
                  width="150"
                  v-if="fieldConfig.employerId"
                >
                </el-table-column>
                <el-table-column
                  :label="$t('employment_type')"
                  prop="employmentForm"
                  width="150"
                  v-if="fieldConfig.employmentForm"
                >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.employment_type"
                      :value="scope.row.employmentForm"
                    />
                  </template>
                </el-table-column>

                <el-table-column
                  :label="$t('employee_status')"
                  prop="employeeStatus"
                  width="150"
                  v-if="fieldConfig.employeeStatus"
                >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.job_status"
                      :value="scope.row.employeeStatus"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('payroll_group')"
                  prop="compensationGroupName"
                >
                </el-table-column>
                <el-table-column
                  :label="$t('performance_group')"
                  prop="performanceGroupName"
                >
                </el-table-column>

                <el-table-column
                  :label="$t('holiday_group')"
                  prop="vacationGroupName"
                >
                </el-table-column>
                <el-table-column
                  :label="$t('attendance_group')"
                  prop="attendanceGroupName"
                >
                </el-table-column>
                <el-table-column :label="$t('action')" width="100">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      @click="lookInfo(scope.row)"
                      >{{ $t("view_details") }}</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>

          <el-tab-pane :label="$t('employee_personal_file_history')" name="2">
            <el-table :data="changeRecordList" border>
              <el-table-column
                :label="$t('record_type')"
                prop="recordType"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="{ row }">
                  {{ dict.label.sys_oper_type[row.recordType] }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('effective_date')"
                align="center"
                prop="effectiveDate"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :label="$t('reasons')"
                align="center"
                prop="changeContent"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                :label="$t('update_time')"
                align="center"
                prop="effectiveDate"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleHistoryView(scope.row)"
                    >{{ $t("view_details") }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="employeeProfileTotal > 0"
              :total="employeeProfileTotal"
              :page.sync="employeeProfileParams.pageNum"
              :limit.sync="employeeProfileParams.pageSize"
              @pagination="getChangeRecord"
              :page-sizes="[10,20,30,50,100, 200]"
            />
          </el-tab-pane>
          <el-tab-pane :label="$t('social_welfare')" name="3">
            <el-table :data="planData" border>
              <el-table-column
                :label="$t('employer_name')"
                align="center"
                prop="employerName"
              >
              </el-table-column>
              <el-table-column
                :label="$t('plan_name')"
                align="center"
                prop="schemeName"
              >
              </el-table-column>
              <el-table-column
                :label="$t('plan_type')"
                align="center"
                prop="schemeType"
              >
                <template slot-scope="{ row }">
                  {{ dict.label.contribution_plan_type[row.schemeType] }}
                </template>
              </el-table-column>
              <el-table-column :label="$t('action')" align="center" width="100">
                <template slot-scope="{ row }">
                  <el-button
                    size="mini"
                    type="text"
                    @click="employeeSpecialContributionView(row)"
                    >{{ $t("view_details") }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>
    <EmployeeInfo :fieldConfig="fieldConfig" ref="employeeInfo"></EmployeeInfo>
    <PofileUpdateInfo ref="pofileUpdateInfo"></PofileUpdateInfo>
    <employeePlan ref="employeePlan"></employeePlan>
  </div>
</template>
<script>
import {
  getEmployee,
  getPlan,
  getPositionList,
  getSalaryGroupList,
  getPerformanceGroupList,
  getVacationGroupList,
  getCheckWorkGroupList,
  getChangeRecord,
  employeeProfile,
  employeeSpecialContribution,
} from "@/api/custom/employeeList";
import EmployeeInfo from "./employeeInfo.vue";
import PofileUpdateInfo from "./profileUpdateInfo";
import employeePlan from "./planInfo.vue";
export default {
  name: "Employee",
  dicts: [
    "depart_type",
    "leave_sex",
    "job_status",
    "employment_type",
    "yes_or_no",
    "salary_type",
    "experience_type",
    "currency_type",
    "day_unit",
    "contribution_plan_type",
    "sys_oper_type",
    "leave_marital_status",
  ],
  components: {
    EmployeeInfo,
    PofileUpdateInfo,
    employeePlan,
  },
  props: {
    employerOptions: {
      type: Array,
      default() {
        return [];
      },
    },
    deptOptions: {
      type: [Array, null],
      default() {
        return [];
      },
    },
    fieldConfig: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      detailTab: "1",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      employeeProfileTotal: 0,
      employeeProfileParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: null,
      fixedList: [], //固定薪资
      nonFixedList: [], //非固定薪资

      securityList: [], //社保
      fundList: [], //公积金
      taxList: [], //个人专项扣除

      //职位
      positionOptions: [],

      payGroupListOption: [],
      performanceGroupOption: [],
      vacationGroupOption: [],
      checkWorkGroupOption: [],
      changeRecordList: [],
      planData: [],
    };
  },
  created() {},
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
    },
    employeeSpecialContributionView(item) {
      employeeSpecialContribution(item.id).then((res) => {
        this.$refs.employeePlan.handlePlan(res.data);
        this.$refs.employeePlan.title = this.$t("view");
      });
    },
    handleHistoryView(row) {
      employeeProfile(row.id).then((res) => {
        res.data.employeeName = this.form.employeeName;
        this.$refs.pofileUpdateInfo.handleView(res.data);
      });
    },
    lookInfo(row) {
      this.$refs.employeeInfo.open(row);
    },
    /** 查看操作 */
    handleView(row) {
      // this.getGroupList();
      getEmployee(row.id).then((response) => {
        const form = response.data;
        if (form.fixedList) this.fixedList = form.fixedList;
        if (form.nonFixedList) this.nonFixedList = form.nonFixedList;

        this.form = form;
        this.getPlan();
        this.getPositionList();
        this.getChangeRecord();
        this.open = true;
        this.title = this.$t("view");
      });
    },
    getPlan() {
      getPlan(this.form.id).then((res) => {
        if (res.data) {
          this.planData = res.data;
        }
      });
    },
    getChangeRecord() {
      this.employeeProfileParams.employeeId = this.form.id;
      getChangeRecord(this.employeeProfileParams).then((res) => {
        this.changeRecordList = res.data.records;
        this.employeeProfileTotal = res.data.total;
      });
    },
    handleTabClick() {
      if (this.detailTab == 2) {
        this.getChangeRecord();
      } else if (this.detailTab == 3) {
        this.getPlan();
      }
    },
    /*查询职位下拉数据*/
    getPositionList() {
      getPositionList({
        pageNum: 1,
        pageSize: 999,
        employerId: this.form.employerId,
      }).then((res) => {
        this.positionOptions = res.data.records.map((item) => {
          if (item.rankList && item.rankList.length) {
            item.rankList = item.rankList.map((rankItem) => {
              return {
                label: rankItem.rankName,
                value: rankItem.id,
                raw: {
                  listClass: "",
                },
              };
            });
          } else {
            item.rankList = [];
          }
          return {
            ...item,
            label: item.positionName,
            value: item.id,
            raw: {
              listClass: "",
            },
          };
        });
      });
    },
    /*查询各个组下拉框数据 */
    getGroupList() {
      getSalaryGroupList().then((res) => {
        this.payGroupListOption = res.data.map((item) => {
          return {
            label: item.groupName,
            value: item.id,
            raw: {
              listClass: "",
            },
          };
        });
      });
      getPerformanceGroupList({
        pageNum: 1,
        pageSize: 999,
      }).then((res) => {
        this.performanceGroupOption = res.rows.map((item) => {
          return {
            label: item.groupName,
            value: item.id,
            raw: {
              listClass: "",
            },
          };
        });
      });
      getVacationGroupList({
        pageNum: 1,
        pageSize: 999,
      }).then((res) => {
        this.vacationGroupOption = res.rows.map((item) => {
          return {
            label: item.sectionName,
            value: item.id,
            raw: {
              listClass: "",
            },
          };
        });
      });
      getCheckWorkGroupList({
        pageNum: 1,
        pageSize: 999,
      }).then((res) => {
        this.checkWorkGroupOption = res.data.map((item) => {
          return {
            label: item.attendanceGroupName,
            value: item.attendanceGroupId,
            raw: {
              listClass: "",
            },
          };
        });
      });
    },
    getStatusText(row) {
      if (row.expirationDate) {
        const newDataTime = new Date().getTime();
        const endDateTime = new Date(row.expirationDate).getTime();
        const startDateTime = new Date(row.effectiveDate).getTime();
        if (startDateTime > newDataTime) {
          return this.$t('not_effective');
        } else if (endDateTime > newDataTime) {
          return this.$t('in_effect');
        } else {
          return this.$t('expired');
        }
      } else {
        return this.$t('in_effect');
      }
    },
    getStatusText1(row) {
      if (row.dateExpiration && row.dateDffective) {
        const newDataTime = new Date().getTime();
        const endDateTime = new Date(row.dateExpiration).getTime();
        const startDateTime = new Date(row.dateDffective).getTime();
        if (startDateTime > newDataTime) {
          return this.$t('not_effective');
        } else if (endDateTime > newDataTime) {
          return this.$t('in_effect');
        } else {
          return this.$t('expired');
        }
      } else {
        return "";
      }
    },
  },
};
</script>
<style scoped lang="scss">
.header-block {
  padding: 0 20px;
}
</style>
